<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/public.css">
    <link rel="stylesheet" href="../style/bootstrap.css">
    <link rel="stylesheet" href="./style/home.css">
    <title>后台管理系统</title>
</head>

<body>
    <div class="home">
        <header class="h70 fcb pa10 ba289">
            <div class="fl aic">
                <img :src="headInfo.icon" alt="">
                <span class="f16 ml-10 cfff">{{ headInfo.name }}</span>
            </div>
            <h1 class="f16 cfff">
                后台管理系统
                <span @click="tui()" class="ml-3">退出登录</span>
            </h1>
        </header>

        <section class="baa">
            <li class="item active">用户管理</li>
            <li class="item ">页面管理</li>
            <li class="item ">会员管理</li>
            <li class="item ">404页面</li>
            <li class="item ">设置管理</li>
        </section>

        <main>
            <div class="container">
                <div class="fcb">
                    <h1 class="pt-4">用户管理</h1>
                    <button @click="addUser()" class="btn mt-3 btn-primary">添加用户</button>
                </div>
                <table class="table user-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>用户名</th>
                            <th>手机号</th>
                            <th >创建时间</th>
                            <th>修改时间</th>
                            <th>权限</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>例</td>
                            <td>张三</td>
                            <td>zhangsan</td>
                            <td>13800138000</td>
                            <td>2020-08-15</td>
                            <td>2022-12-15</td>
                            <td>管理员</td>
                            <td>
                                <button class="btn btn-sm btn-warning">编辑</button>
                                <button class="btn btn-sm btn-danger">删除</button>
                            </td>
                        </tr>
                        <tr v-for="(item, index) in user" :key="item.id">
                            <td>{{ item.id }}</td>
                            <td v-if="!item.editing">{{ item.name }}</td>
                            <td v-if="!item.editing">{{ item.username }}</td>
                            <td v-if="!item.editing">{{ item.phone }}</td>
                            <td v-if="!item.editing">{{ formateDate(item.cTime) }}</td>
                            <td v-if="!item.editing">{{ formateDate(item.uTime) }}</td>
                            <td v-if="!item.editing">{{ item.authority === 1? '超级管理员' : item.authority === 2? '管理员' : '普通用户' }}</td>
                            <td v-if="item.editing">
                                <input v-model="item.name" type="text" class="form-control inp100" />
                            </td>
                            <td v-if="item.editing">
                                <input v-model="item.username" type="text" class="form-control inp100" />
                            </td>
                            <td v-if="item.editing">
                                <input v-model="item.phone" type="text" class="form-control inp120" />
                            </td>
                            <td v-if="item.editing">
                                <div class="fl aic">
                                    密码：<input v-model="item.password" type="text" class="form-control inp100" />
                                </div>
                            </td>
                            <td v-if="item.editing">
                                <div class="fl aic">
                                    头像：<input v-model="item.icon" type="text" class="form-control inp100" />
                                </div>
                            </td>
                            <td v-if="item.editing">
                                <select v-model.number="item.authority" class="form-control inp120" id="authority">
                                    <option value="3">普通用户</option>
                                    <option value="2">管理员</option>
                                </select>
                            </td>
                            <td>
                                <button v-if="!item.editing" @click="editUser(item)" class="btn btn-sm btn-warning">编辑</button>
                                <button v-if="item.editing" @click="updateUser(item)" class="btn btn-sm btn-success">完成</button>
                                <button @click="deleteUser(item.id)" class="btn btn-sm btn-danger">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>

    </div>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/vue2.js"></script>
    <script>
        const userId = location.href.split('?')[1].split('=')[1];
        const home = new Vue({
            el: '.home',
            data: {
                headInfo: [],
                user: []
            },
            async created() {
                let resHeadInfo = await axios.get('http://localhost:3888/user/' + userId);
                this.headInfo = resHeadInfo.data;
                let resUser = await axios.get('http://localhost:3888/user');
                this.user = resUser.data.map(user => ({...user, editing: false }));
            },
            methods: {
                formateDate(time) {
                    if (!time) {
                        return '';
                    }
                    var date = new Date(time);
                    var Y = date.getFullYear();
                    var M = date.getMonth() + 1;
                    var D = date.getDate();

                    M = M < 10? '0' + M : M;
                    D = D < 10? '0' + D : D;
                    return `${Y}-${M}-${D}`
                },
                async deleteUser(id) {
                    if (confirm('确定要删除该用户吗？')) {
                        try {
                            // 调用后端的删除用户接口
                            await axios.delete(`http://localhost:3888/user/${id}`);
                            alert('删除成功');
                            this.user = this.user.filter(user => user.id!== id);
                        } catch (error) {
                            console.error('删除用户失败', error);
                        }
                    }
                },
                editUser(item) {
                    item.editing = true;
                },
                async updateUser(item) {
                    // 输入验证
                    if (!item.username &&!item.phone) {
                        alert('用户名和手机号不能同时为空');
                        return;
                    }
                    if (!item.password) {
                        alert('密码不能为空');
                        return;
                    }
                    // 获取当前时间作为修改时间
                    item.uTime = Date.now();
                    try {
                        // 调用后端的更新用户接口
                        alert('更新成功');
                        await axios.put(`http://localhost:3888/user/${item.id}`, item);
                        item.editing = false;
                    } catch (error) {
                        console.error('更新用户失败', error);
                    }
                },
                addUser() {
                    location.href = `./add.html?id=${userId}`;
                },
                tui() {
                    location.href = `../index.html`;
                }
            }
        })
    </script>
</body>

</html>